<template>
    <div class="tabs-content">
          <!--*********************************************************我的申请************************************8***************-->
                <!-- 头部查询区域 -->
                  <el-form :inline="true" :model="dataForm2" style="display: flex; justify-content: space-between; align: center; margin: 0px 20px">
                    <div style="display:inline-block">
                      <el-form-item>
                        <!-- <el-button type="primary" @click="searchDataList()">查询</el-button> -->
                        <el-button type="primary" @click="handleCreate()">新增</el-button>
                        <!-- <el-button type="primary" v-if="flag===0" @click="handleLookHistory()">历史申请</el-button>
                        <el-button type="primary" v-else @click="getDataList()">流转中的申请</el-button> -->
                        <!-- <el-button type="primary" @click="deleteHandle()" :disabled="multipleSelection.length === 0">批量删除</el-button> -->
                      </el-form-item>
                    </div>
                  </el-form>
                  <!-- 内容区域 -->
                  <el-table
                    class="first"
                    ref="NowApplyDataList"
                    border
                    :data="NowApplyDataList"
                    height="73.5%"
                    style="width: 97.5%"
                    :header-cell-style="{height: '7vh'}"
                    :cell-style="cellStyle"
                            >
                    <el-table-column
                      type="index"
                      :index="getIndex"
                      width="55"
                      label="序号"
                      header-align="center"
                      align="center"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="id"
                      label="id"
                      header-align="center"
                      align="center"
                      v-if="flag === 1">
                    </el-table-column>
                    <el-table-column
                      prop="processInstanceId"
                      label="流程ID"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                      </el-table-column>
                    <el-table-column
                      prop="instanceType"
                      label="申请类型"
                      header-align="center"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="description"
                      label="申请描述"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <el-table-column
                      prop="quantity"
                      label="天数"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <el-table-column
                      prop="instanceStartTime"
                      width="190"
                      label="申请时间"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{renderTime(scope.row['instanceStartTime']) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="startDate"
                      width="190"
                      label="开始时间"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{renderTime(scope.row['startDate']) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="endDate"
                      width="190"
                      label="结束时间"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{renderTime(scope.row['endDate']) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="isEnded"
                      label="申请状态"
                      header-align="center"
                      align="center">申请中
                    </el-table-column>
                    <el-table-column
                      prop="document"
                      label="是否是公文"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <el-table-column
                      prop="privacy"
                      label="私密性"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{scope.row['privacy'] == 1 ? '公开' : '私密'}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="hurry"
                      label="急缓"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{scope.row['privacy'] == 1 ? '一般' : '紧急'}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="path"
                      label="路径"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <!-- <el-table-column
                      width="100"
                      header-align="center"
                      align="center"
                      label="操作"
                    >
                      <template slot-scope="scope">
                        <el-button size="small" type="primary" icon="el-icon-edit" @click="handleLook(scope.row)">查看</el-button>
                      </template>
                    </el-table-column> -->
                  </el-table>
                  <!-- 分页器 -->
                  <div class="block">
                    <el-pagination
                      align="right"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-size="pageSize"
                      layout="total, prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </div>
                  <!-- 弹窗，新增或修改 -->
                  <el-dialog
                        :title="textMap[dialogStatus]"
                        :close-on-click-modal=true
                        :visible.sync="dialogFormVisible"
                        top="40px"
                         @open="fixUserName">
                        <el-form
                        :rules="applyRules"
                        class="Addform"
                        :model="dataFormUpload"
                        ref="dataFormUpload"
                        label-width="110px"
                        label-position="left"
                        style="width: 400px; margin-left: 80px">
                          <div class="right1">
                            <el-row :gutter="15">
                                <el-form-item label="申请类型" style="width: 370px;" prop="did" >
                                  <el-select v-model="dataFormUpload.did" style="width: 260px;" placeholder="请选择申请类型">
                                    <el-option
                                      v-for="item in array"
                                      :key="item.deploymentId"
                                      :label="item.deploymentType"
                                      :value="item.deploymentId"
                                    >
                                    </el-option>
                                  </el-select>
                                </el-form-item>
                                <el-form-item label="申请人" style="width: 370px;" prop="starter" >
                                  <el-input disabled v-model="dataFormUpload.starter"></el-input>
                                </el-form-item>
                                <el-form-item label="天数" style="width: 370px;" prop="quantity" v-if="flag===1">
                                  <el-input v-model="dataFormUpload.quantity" :disabled="true"></el-input>
                                </el-form-item>
                                <el-form-item label="申请描述" style="width: 370px;" prop="description">
                                  <el-input v-model="dataFormUpload.description" ></el-input>
                                </el-form-item>
                                <el-form-item label="开始时间" style="width: 370px;" prop="beginDate">
                                  <!-- <el-form-item style="width: 260px;" prop="beginDate"> -->
                                    <!-- value-format="yyyy-MM-dd" -->
                                    <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="dataFormUpload.beginDate" style="width: 100%;" :picker-options="pickerOptionsStart"></el-date-picker>
                                  <!-- </el-form-item> -->
                                  <!-- @change="getSTime(dataFormUpload.beginDate)" -->
                                </el-form-item>
                                <el-form-item label="结束时间" style="width: 370px;" prop="endDate">
                                  <!-- <el-form-item style="width: 260px;" prop="endDate"> -->
                                    <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="dataFormUpload.endDate" style="width: 100%;" :picker-options="pickerOptionsEnd"></el-date-picker>
                                  <!-- </el-form-item> -->
                                </el-form-item>
                                <!-- <el-form-item label="是否是公文" style="width: 370px;" prop="document">
                                  <el-input v-model="dataFormUpload.document" ></el-input>
                                </el-form-item> -->
                                <!-- <el-form-item label="是否是公文" style="width: 370px;" prop="document">
                                  <el-switch
                                    v-model="dataFormUpload.document"
                                    active-color="#13ce66"
                                    active-value=1
                                    inactive-value=0>
                                  </el-switch>
                                </el-form-item> -->
                                <el-form-item label="私密性" style="width: 370px;" prop="privacy">
                                  <!-- <el-input v-model="dataFormUpload.privacy" ></el-input> -->
                                  <el-select style="width: 260px;" v-model="dataFormUpload.privacy">
                                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                  </el-select>
                                </el-form-item>
                                <el-form-item label="急缓" style="width: 370px;" prop="hurry">
                                  <!-- <el-input v-model="dataFormUpload.hurry" ></el-input> -->
                                  <el-select style="width: 260px;" v-model="dataFormUpload.hurry">
                                    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                  </el-select>
                                </el-form-item>
                                <!-- <el-form-item prop="file">
                                  <el-upload
                                  ref="hewenlin"
                                  class="upload-demo"
                                  action="/process/instance"
                                  :data="dataFormUpload"
                                  :on-success="upFile"
                                  :on-change="getfile"
                                  :auto-upload="false"
                                  :file-list="fileList"
                                  :headers="header"
                                  >
                                  <el-button  slot="trigger" size="small" type="primary">选择文件</el-button>
                                  <el-button  style="margin-left:5px" size="small" @click="submitForm('dataFormUpload')">保 存</el-button>
                                  <el-button size="small" @click="resetForm('dataFormUpload')">重 置</el-button>
                                  </el-upload>
                                </el-form-item> -->
                                <!-- <el-form-item>
                                  <el-button type="primary" style="margin-left:5px" size="small" @click="submitForm('dataFormUpload')">保 存</el-button>
                                  <el-button type="primary" size="small" @click="resetForm('dataFormUpload')">重 置</el-button>
                                </el-form-item> -->
                            </el-row>
                          </div>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                          <el-button type="primary" @click="dialogStatus === 'create' ? createData('dataFormUpload') : lookData()">确定</el-button>
                          <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                        </span>
                  </el-dialog>
    </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'NowApply',
  data() {
    return {
      activeName: 'nowapply',
      // 时间范围限制
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.dataFormUpload.endDate) {
            // return (
            //   // time.getTime() > Date.now() - 8.64e6 ||
            //   time.getTime() > this.dataFormUpload.endDate /* 开始日期要在选择的结束日期之前*/
            // )
            return time.getTime() > this.dataFormUpload.endDate
          }
          // return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
          // return time.getTime() > Date.now() - 8.64e6 /* 今天及之前，注意数字不一样*/
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.dataFormUpload.beginDate) {
            // return (
            //   // time.getTime() > Date.now() - 8.64e6 ||
            //   time.getTime() < this.dataFormUpload.beginDate /* 结束日期要在选择的开始日期之后*/
            // )
            return time.getTime() < this.dataFormUpload.beginDate
          }
          // return time.getTime() > Date.now() - 8.64e6 /* 今天及之前*/
        }
      },
      options: [{
        value: '流程ID',
        label: '流程ID'
      }, {
        value: '申请类型',
        label: '申请类型'
      }, {
        value: '申请状态',
        label: '申请状态'
      }],
      value: '',
      // *******翻页*********************
      NowApplyDataList: [], // “我的申请”数据列表
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页选定的显示条数
      total: 0,
      // ********************************
      dataForm2: {}, // 想要查询的数据
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogFormVisible: false,
      dataForm: {},
      dataFormUpload: {
        did: '',
        starter: '',
        beginDate: '',
        endDate: '',
        quantity: '',
        description: '',
        document: 0,
        privacy: '',
        hurry: ''
        // file: ''
      }, // “我的申请”界面新增弹窗绑定的表单
      postId: 0,
      flag: 0,
      array: [], // 存已部署的流程列表
      user: {},
      authentication: '',
      // fileList: [], // 文件列表
      // fileflag: 0,
      tableDataArray1: [],
      tableDataArray2: [],
      tableDataArray3: [],
      applyRules: {
        // did: [
        //   { required: true, message: '请选择申请类型', trigger: 'blur' }
        // ],
        did: [
          { required: true, message: '请填写申请类型', trigger: 'change' }
        ],
        starter: [
          { required: true, message: '请填写申请人', trigger: 'blur' }
        ],
        // quantity: [
        //   { required: true, message: '请填写天数', trigger: 'blur' }
        // ],
        description: [
          { required: true, message: '请填写申请理由', trigger: 'blur' }
        ],
        beginDate: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        endDate: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ],
        // document: [
        //   { required: true, message: '请选择是否是公文', trigger: 'blur' }
        // ],
        privacy: [
          { required: true, message: '请选择私密性', trigger: 'change' }
        ],
        hurry: [
          { required: true, message: '请选择急缓', trigger: 'change' }
        ]
        // file: [
        //   { required: true, message: '请上传文件', trigger: 'change' }
        // ]
      },
      options2: [
        {
          value: '0',
          label: '私密'
        },
        {
          value: '1',
          label: '公开'
        }
      ],
      options3: [
        {
          value: '0',
          label: '一般'
        },
        {
          value: '1',
          label: '紧急'
        }
      ]
    }
  },
  // 生命周期
  mounted(activeName) {
    this.getDataList()
    this.getList()
    // this.getData()
    this.authentication = sessionStorage.getItem('tokenStr')
  },
  created() {
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
  },
  computed: {
    header() {
      return {
        authentication: this.authentication
      }
    }
  },
  watch: {
    tableData(newValue, oldValue) {
      this.currentData = newValue.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    CurrentPage(newValue, oldValue) {
      this.currentPage = this.tableData.slice((newValue - 1) * this.pageSize, newValue * this.pageSize)
    }
  },
  methods: {
    // 加载效果
    // getData() {
    //   const loading = this.$loading({
    //     lock: true, // lock的修改符--默认是false
    //     text: 'Loading', // 显示在加载图标下方的加载文案
    //     spinner: 'el-icon-loading', // 自定义加载图标类名
    //     background: 'rgba(0, 0, 0, 0.7)', // 遮罩层颜色
    //     target: document.querySelector('#table')// loadin覆盖的dom元素节点
    //   })
    //   // 成功回调函数停止加载
    //   loading.close()
    // },
    // 计算开始日期与结束日期之差
    GetNumberOfDays(date1, date2) { // 获得天数
      // date1：开始日期，date2结束日期
      var a1 = Date.parse(new Date(date1))
      var a2 = Date.parse(new Date(date2))
      var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24))// 核心：时间戳相减，然后除以天数
      return day
    },
    // 申请人固定
    fixUserName() {
      const info = JSON.parse(sessionStorage.getItem('user'))
      console.log('获取userName')
      console.log(info)
      this.dataFormUpload.starter = info.name
    },
    // 表格行高
    cellStyle() {
      return {
        'font-size': '14px',
        height: '45px',
        padding: '0'
      }
    },
    // 表头行高
    headerStyle() {
      return {
        height: '55px'
      }
    },
    // ****************翻页*************
    // 改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    // 序号
    getIndex(index) {
      return index + (this.currentPage - 1) * this.pageSize + 1
    },
    // *********************************
    // 已部署的流程文件
    getList() {
      this.pageSize = 100
      this.getRequest('/process/deploymentInfo/' + this.currentPage + '/' + this.pageSize).then((resp) => {
        if (resp) {
          console.log('---------------------?----------------------')
          console.log(resp)
          // 获取长度
          var len = resp.data.length
          this.tableDataArray3 = resp.data
          // 去掉total后的数据列表
          this.tableDataArray3.pop(resp.data[len - 1])
          this.array = this.tableDataArray3
          console.log(this.array)
        } else {
          console.log('失败')
        }
      })
    },
    // 时间格式转换
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    // 获取“我的申请”数据列表
    getDataList(data) {
      // this.flag = 0
      // console.log('获取我的申请数据 1079')
      // 申请的标志
      var applyfind = 0
      this.getRequest('/process/instance/' + this.user.name + '/' + applyfind + '/' + this.currentPage + '/' + this.pageSize).then((resp) => {
        if (resp) {
          // console.log('------------------nnnn-------------------------')
          // console.log(resp)
          // console.log(resp.data)
          var len = resp.data.length
          this.total = resp.data[len - 1].total
          this.tableDataArray3 = resp.data
          this.tableDataArray3.pop(resp.data[len - 1])
          this.NowApplyDataList = this.tableDataArray3
          // console.log(this.NowApplyDataList)
        } else {
          console.log('获取列表失败')
        }
      })
    },
    // ********************************************上传流程文件**********************************************
    // // 上传流程文件
    // upFile(res, file) {
    //   console.log(res)
    // if (res.msg === '开启成功') {
    //   this.$message.success(res.msg)
    // } else {
    //   this.$message.error('新增申请失败')
    // }
    // },
    // submitForm(formName) {
    // this.$refs[formName].validate((valid) => {
    //   if (valid) {
    //     alert('submit!')
    // console.log(this.dataFormUpload.beginDate)
    // this.dataFormUpload.beginDate = getTime(this.dataFormUpload.beginDate)
    // // this.dataFormUpload.endDate = this.getTime(this.dataFormUpload.endDate)
    // // this.$refs.upload.submit()
    // console.log('下面是开始日期')
    // console.log(this.dataFormUpload.beginDate)
    // this.dataFormUpload.beginDate = this.$moment(this.dataFormUpload.beginDate).format('YYYY-MM-DD 00:00:00')
    // this.dataFormUpload.endDate = this.$moment(this.dataFormUpload.endDate).format('YYYY-MM-DD 00:00:00')
    //   this.dataFormUpload.document = 0
    //   this.dataFormUpload.quantity = this.GetNumberOfDays(this.dataFormUpload.beginDate, this.dataFormUpload.endDate)
    //   console.log('form', this.dataFormUpload)
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       if (this.fileflag) {
    //         this.$refs.hewenlin.submit()
    //         this.dialogFormVisible4 = false
    //         this.getDataList()
    //         // this.$forceUpdate()
    //         // this.$message.success('上传成功')
    //         this.$forceUpdate()
    //         // this.$refs.hewenlin.submit()
    //         this.dataFormUpload.did = ''
    //         this.dataFormUpload.starter = ''
    //         this.dataFormUpload.beginDate = ''
    //         this.dataFormUpload.endDate = ''
    //         this.dataFormUpload.quantity = ''
    //         this.dataFormUpload.description = ''
    //         this.dataFormUpload.document = 1
    //         this.dataFormUpload.privacy = ''
    //         this.dataFormUpload.hurry = ''
    //         this.dataFormUpload = {}
    //       } else {
    //         this.$message.error('请上传文件')
    //       }
    //     } else {
    //       this.$message.error('请完成所有必填项')
    //     }
    //   })
    // },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields()
    // },
    // returnValue() {
    //   return {
    //     token: sessionStorage.getItem('tokenStr')
    //   }
    // },
    // 新增申请
    handleCreate() {
      console.log('---------------------Test1---------------')
      this.dialogFormVisible = true
      this.dialogStatus = 'create'
    },
    createData(formName) {
      console.log(66666)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.dataFormUpload.document = 0
          this.dataFormUpload.quantity = this.GetNumberOfDays(this.dataFormUpload.beginDate, this.dataFormUpload.endDate)
          var fd = new FormData()
          fd.append('did', this.dataFormUpload.did)
          fd.append('starter', this.dataFormUpload.starter)
          fd.append('beginDate', this.dataFormUpload.beginDate)
          fd.append('endDate', this.dataFormUpload.endDate)
          fd.append('quantity', this.dataFormUpload.quantity)
          fd.append('description', this.dataFormUpload.description)
          fd.append('document', this.dataFormUpload.document)
          fd.append('privacy', this.dataFormUpload.privacy)
          fd.append('hurry', this.dataFormUpload.hurry)
          const config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          axios.post('/process/instance', fd, config)
            .then((resp) => {
              console.log(resp)
              console.log(resp.did)
              if (resp.msg === '开启成功') {
                this.$message.success(resp.msg)
              } else {
                this.$message.error('新增申请失败')
              }
              this.dataFormUpload = {}
              this.getDataList()
              this.$forceUpdate()
            })
            .catch(err => {
              console.log('err=>', err)
            })
          this.dialogFormVisible = false
        } else {
          this.$message.error('请完成所有必填项')
          console.log('error submit!!')
          return false
        }
      })
    },
    // // 查看
    // handleLook(data) {
    //   this.dialogFormVisible = true
    //   this.dialogStatus = 'update'
    //   this.postId = data.id
    //   this.dataForm = data
    // },
    // lookData() {
    //   this.putRequest('/device', {
    //     devId: this.dataForm.devId,
    //     devName: this.dataForm.devName,
    //     devClass: this.dataForm.devClass,
    //     devPrice: this.dataForm.devPrice,
    //     devAmount: this.dataForm.devAmount
    //   }).then((resp) => {
    //     if (resp) {
    //       console.log(resp)
    //       if (resp.msg === '更新成功') {
    //         this.$message.success(resp.msg)
    //       } else {
    //         this.$message.error('更新失败')
    //       }
    //       this.getDataList()
    //     } else {
    //       console.log('更新失败')
    //     }
    //   })
    //   this.getDataList()
    //   this.dialogFormVisible = false
    //   // this.getDataList()
    // },
    handleLook(data) {
      this.dialogFormVisible = true
      this.dataFormUpload.beginDate = data.beginDate
      this.dataFormUpload.description = data.description
      this.dataFormUpload.did = data.did
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
.right1{
  height: 420px;
}
.right2{
  height: 240px;
}
.right3{
  height: 150px;
}
/* .right-content{
  border: px solid #fff;
  border-bottom: none;
  background-color: #fff;
  height: 100%;
  padding-left: 0px;
  margin-top: 0px;
} */
.defineC{
  /* line-height: 30px; */
  /* height: 20px; */
  margin-left: 14px;
}
/* div{
  align-items: center;
} */
/* .el-form{
  margin-top: 0px;
} */
.demo-form-inline{
  width: 97%;
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  margin-bottom: 0px;
  margin-top: 5px;
}
.el-table{
  width: 97%;
  margin: 15px auto
}
.first{
  width: 97%;
  margin: 0px auto
}
.el-dialog__body{
  height: 150px !important;
  overflow: auto;
}
@import '../../assets/css/top-form.css';
@import '../../assets/css/table.css';
.tabs-content {
  width: 100%;
  height: 78vh !important;
}
/** 分页器 start  */
.block {
  position: absolute;
  top: 94% !important;
  right: 1.5%;
}
.el-pagination {
  align-items: center;
}
.el-pagination /deep/ span:not([class*=suffix]) {
  font: 1vw '宋体' !important;
  padding-top: 0px;
}
.el-pagination /deep/ .el-pagination__total {
  padding-top: 5px !important;
}
.el-pagination /deep/ .el-input__inner {
  font: 1vw '宋体' !important;
}
/** 分页器 end */
</style>
